<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>数据报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div id="main" style="width: 750px;height:400px;"></div>
    </el-card>
  </div>
</template>

<script lang="ts">
import * as echarts from "echarts";
import Vue from "vue";
import { reportList } from "@/request/api";
import Component from "vue-class-component";
@Component
export default class Report extends Vue {
  options: {
    title: { text: string };
    tooltip: {
      trigger: string;
      axisPointer: {
        type: string;
        label: {
          backgroundColor: string;
        };
      };
    };
    grid: {
      left: string;
      right: string;
      bottom: string;
      containLabel: boolean;
    };
    xAxis: Array<{ boundaryGap: boolean }>;
    yAxis: Array<{ type: string }>;
    legend?: any;
    series?: any;
  } = {
    title: {
      text: "用户来源",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#E9EEF3",
        },
      },
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        boundaryGap: false,
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
  };
  async mounted() {
    // 使用断言
    var myChart = echarts.init(document.getElementById("main") as HTMLElement);

    const { data, meta } = await reportList();
    if (meta.status !== 200) return this.$message.error("获取报表数据失败");
    // const result = _.merge(res.data, this.option)
    this.options.legend = data.legend;
    this.options.series = data.series;
    this.options.xAxis = data.xAxis;
    this.options.yAxis = data.yAxis;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(this.options);
  }
}
</script>

<style lang="less" scoped>
.el-breadcrumb {
  padding: 24px;
}
</style>